<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10" style="padding: 1%">
        <!--        站点的标题管理-->
        <div style="padding: 1%" class="shadow">
          <h3>站点的大小标题</h3>
          <el-form style="margin-top: 3%;" ref="form" label-width="80px">
            <el-form-item label="大标题">
              <el-input v-model="SITE_TITLE" />
            </el-form-item>
            <el-form-item label="小标题">
              <el-input v-model="SITE_SUBHEADING" />
            </el-form-item>
            <el-form-item label="页脚">
              <el-input v-model="SITE_FOOTER_INFORMATION" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="btn_save()" style="width: 100%">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="14" :xl="14" style="padding: 1%">
        <!--        站点的关于信息-->
        <div style="padding: 1%" class="shadow">
          <h3>关于信息</h3>
          <p>ps: 建议使用typora等类类似软件编写,然后copy过来</p>
          <el-form style="margin-top: 3%;" ref="form" label-width="80px">
            <el-input type="textarea" :rows="20" placeholder="请输入内容" v-model="SITE_ABOUT"></el-input>
            <el-form-item style="margin-top: 5%;max-width: 40em" align="center">
              <el-button type="primary" @click="btn_save_about()" style="width: 100%">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
let that;
export default {
  name: "SiteManagement",
  data() {
    return {
      SITE_TITLE: "",
      SITE_SUBHEADING: "",
      SITE_FOOTER_INFORMATION: "",
      SITE_ABOUT: ""
    };
  },
  mounted() {
    that = this;
    that
      .$Axios(that.$store)
      .get(that.SITE_API + "/headline")
      .then(result => {
        that.SITE_TITLE = result.data.data.value;
      })
      .catch(err => console.log(err));
    that
      .$Axios(that.$store)
      .get(that.SITE_API + "/subtitle")
      .then(result => {
        that.SITE_SUBHEADING = result.data.data.value;
      });
    that
      .$Axios(that.$store)
      .get(that.SITE_API + "/footer")
      .then(result => {
        that.SITE_FOOTER_INFORMATION = result.data.data.value;
      });
    that
      .$Axios(that.$store)
      .get(that.SITE_API + "/about")
      .then(result => {
        that.SITE_ABOUT = result.data.data.value;
      });
  },
  methods: {
    btn_save() {
      let json = {
        SITE_TITLE: that.SITE_TITLE,
        SITE_SUBHEADING: that.SITE_SUBHEADING,
        SITE_FOOTER_INFORMATION: that.SITE_FOOTER_INFORMATION
      };
      that
        .$Axios(that.$store)
        .post(that.SITE_API + "/save_site_information", json)
        .then(() => {
          that.$router.go(0);
        });
    },
    btn_save_about() {
      let json = {
        site_about: that.SITE_ABOUT
      };
      that
        .$Axios(that.$store)
        .post(that.SITE_API + "/about_information", json)
        .then(() => {
          that.$router.go(0);
        });
    }
  }
};
</script>

<style scoped src="../../static/md/markdown.css">
</style>